<template>
  <div class="chart-wrapper">
    <template v-if="headerTitle">
    <el-row class="bgColor">
      <el-col :xs="24" :sm="24" :lg="24">
          <div class="ibox-title pad">
              {{ headerTitle }}
          </div>
      </el-col>
    </el-row>
    <el-row class="bgColor">
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    </template>
    <el-row class="bgColor">
        <el-col :xs="24" :sm="24" :lg="24" class="pad">
            <div v-if="type == 'bar'">
              <ve-bar 
                :data="data"
                :settings="settings"
                :colors="colors"
                :data-empty="dataEmpty"
                :loading="loading"
                :data-zoom="dataZoom">
              </ve-bar>
            </div>
            <div v-else-if="type == 'line'">
              <ve-line 
                :data="data"
                :settings="settings"
                :colors="colors"
                :data-empty="dataEmpty"
                :loading="loading"
                :data-zoom="dataZoom">
              </ve-line>
            </div>
            <div v-else>
              <ve-pie 
                :data="data"
                :settings="settings"
                :colors="colors"
                :data-empty="dataEmpty"
                :loading="loading"
                >
              </ve-pie>
            </div>
        </el-col>
    </el-row>
    
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: () => {
          return {
            columns: ['updatetime', 'number'],
            rows: []
          }
        }
      },
      headerTitle: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'bar'
      },
      settings: {
        type: Object,
        default: () => {         
          return {
            labelMap: {}
          }
        }
      },
      colors: [Array],
      dataEmpty: {
        type: Boolean,
        default: true
      },
      loading: {
        type: Boolean,
        default: true
      },
      dataZoom: {
        type: Array,
        default: () => {
          return [{
              type: 'slider',
              start: 0,
              end: 100
          }]
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
    
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
</style>